<template>
  <div id="app">
    <div class="box">
      <!-- 这是单元格 -->
      <van-cell-group>
        <van-cell title="单元格" value="内容" />
        <van-cell title="单元格" value="内容" label="描述信息" />
      </van-cell-group>
      <!-- 这是弹层 -->
      <van-cell is-link @click="showPopup" @blur="showPopup">展示弹出层</van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">内容</van-popup>
    </div>
    <!-- 第一个组件 日历 -->
    <components_1 :title="cpmeData" ></components_1>
    <!-- 第二个组件 按钮 -->
    <MyButton @changeTitle='changeFn'> </MyButton>
    <!-- 第三个组件 输入框 -->
    <MyInput :inputdata='inputData' @handcount="handChange"></MyInput>
    <router-view />

    <div>{{ count }}</div>
    <button @click="handVuexAdd()">+2</button>

    <button @click='add10(10)'>点击加10</button>

    <button @click='handPrintf()' >点击我打印</button>

    <input type="text" :value="count" @input="handelInput">
  </div>
</template>

<script>
import components_1 from '@/components/components_1.vue'
import MyButton from '@/components/MyButn.vue'
import MyInput from '@/components/MyInput.vue'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  components:{
    components_1,
    MyButton,
    MyInput
  },
  name: "index",
  data() {
    return {
      show: false,
      cpmeData: 'hahah日期选择',
      inputData: 1,
      MyObj: {
        num: 2
      }
    };
  },
  computed:{
      ...mapState(['title', 'count']),
      ...mapState('user',['userdata']),
      ...mapGetters(['plus'])
  },
  created() {
    console.log(this.$store.state.user.userdata);
  },
  methods: {
    ...mapMutations(['add10']),
    ...mapActions(['seTimer']),
    showPopup(){
      this.show = !this.show
    },
    changeFn(newValue) {
      this.cpmeData = newValue
    },
    handChange(newVale){
      if(newVale < 0)
      {
        newVale = 0
      }
      this.inputData = newVale
    },
    handVuexAdd() {
      this.$store.commit('addCount', this.MyObj) 
    },
    handelInput(e) {
    const num = +e.target.value
    this.$store.commit('chang', num)
    },
    handPrintf() {
      const res = this.plus
      console.log(res);
    }
  }
}
</script>


<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  font-size: 16px;
}
input {
  text-align: center;
}

</style>
